<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="80"
    label-position="top"
  >
    <el-row class="w-full" :gutter="10">
      <el-col :span="12">
        <el-form-item label="输出结果语言" prop="language_id">
          <SelectLanguage
            class="w-full"
            v-model="form.language_id"
            @changeItem="changeLanguage"
          ></SelectLanguage>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="翻译内容" prop="translated_content">
          <el-input
            v-model="form.translated_content"
            placeholder="请输入"
            :rows="16"
            type="textarea"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script name="CopyGeneration" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import SelectLanguage from "@/components/Selects/SelectLanguage";

const data = reactive({
  form: {},
  rules: {
    language_id: [{ required: true, message: "请选择语言" }],
    translated_content: [{ required: true, message: "请输入翻译内容" }],
  },
});

const { form, rules } = toRefs(data);

// 选择语言
const changeLanguage = (item) => {
  form.value.language_name = item.name;
};

const formRef = ref();
const emit = defineEmits(["submit"]);
const submit = () => {
  if (!formRef.value) return;
  formRef.value.validate((valid) => {
    if (valid) {
      const userText = getFormData();
      emit("submit", {
        type: "V3",
        userText,
      });
    }
  });
};

const getFormData = () => {
  const dataParts = [];
  dataParts.push(`以下内容翻译为 ${form.value.language_name}，并按以下格式输出`);
  dataParts.push(`翻译内容：${form.value.translated_content}`);
  dataParts.push(`翻译结果:`);
  const finalData = dataParts.join("\n");
  return finalData; // 如果有需要返回数据的地方
};

const reset = () => {
  if (!formRef.value) return;
  formRef.value.resetFields();
  init();
};

const init = () => {
  form.value = {
    language_id: 2,
    language_name: "英文",
    translated_content: "",
  };
};

onMounted(() => {
  init();
});

defineExpose({ submit, reset });
</script>
<style lang="scss" scoped></style>
